<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;margin-top: 10px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .top-right-btn { position: absolute; top: 20px; right: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <button type="button" class="layui-btn" onclick="addCustomer()">
                <i class="layui-icon layui-icon-add-1"></i>  添加新企业</button>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
        </div>
    </div>

    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>

    <script src="../../static/admin/layui2.9.13/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 渲染表格
            table.render({
                elem: '#customerTable',
                url: '/getCustomers',
                height: '500',
                // page: true,
                cols: [[
                    {#{type: 'checkbox', fixed: 'left'},#}
                    {field: 'id', title: '序号', width: 70, sort: true, align: 'center',hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'name', title: '企业名称', width: 280, align: 'left'},
                    {field: 'name_en', title: '英文名', width: 130, align: 'left'},
                    {field: 'remark', title: '企业信息',  align: 'left'},
                    {field: 'create_time', title: '创建时间', width: 170, align: 'left'},
                    {fixed: 'right', title: '操作', width: 130, minWidth: 120, align: 'center', toolbar: '#barDemo'}
                ]],
                done: function () {
                    console.log('表格渲染完成');
                }
            });

            // 表格工具栏事件
            table.on('tool(customerTable)', function (obj) {
                var data = obj.data;
                console.log("obj.data=",data);
                switch (obj.event) {
                    case 'edit':
                        editCustomer(data);
                        break;
                    case 'delete':
                        deleteCustomer(data.id);
                        break;
                }
            });

            // 添加用户
            window.addUser = function () {
                layer.open({
                    title: '添加企业',
                    type: 2,
                    content: '/addCustomerForm',
                    area: ['400px', '400px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('userForm');
                        var formData = new FormData(submitForm);
                        fetch('/addUser', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('userTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 编辑用户
            window.editCustomer = function (customer) {
                var customerId = customer.id;
                layer.open({
                    type: 2,
                    title: '编辑企业',
                    area: ['500px', '400px'],
                    content: '/editCustomerForm/' + customerId,
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitBtn = iframeWindow.document.querySelector('button[lay-submit]');
                        if (submitBtn) {
                            submitBtn.click();
                        }
                    }
                });
            };

            // 删除用户
            window.deleteCustomer = function (uid) {
                console.log(uid);
                layer.confirm('确定要删除该企业吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    fetch(`/deleteUser/${uid}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg(data.msg);
                        table.reload('userTable');
                    });
                }, function () {
                    layer.msg('已取消删除');
                });
            };

            // 添加企业函数
            window.addCustomer = function() {
                layer.open({
                    type: 2,
                    title: '添加企业',
                    area: ['500px', '400px'],
                    content: '/addCustomerForm',
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {
                        // 获取iframe页面的window对象
                        var iframeWindow = window['layui-layer-iframe' + index];
                        // 触发iframe中的提交按钮点击事件
                        var submitBtn = iframeWindow.document.querySelector('button[lay-submit]');
                        if (submitBtn) {
                            submitBtn.click();
                        }
                    }
                });
            };
        });
    </script>
</body>
</html>